<template lang="html">
  <div class="goodsdetails">
    <Header :HeaderTitle="header_title"></Header>
    <!-- 地址 -->
    <Address :address="address"></Address>
    <div class="goodsdetails_main">
      <h2>商品升级</h2>
      <div class="goodsdetails_box">
      <ul class="goods_main_box">
        <li class="goodsname_box" v-for="item in goods">
          <img :src="item.goods_info.show_this_thumb" :alt="item.goods_info.show_this_title" class="goods_img">
          <p class="goodsname_main">{{item.goods_info.show_this_title}}</p>
          <p class="goods_pirce">￥{{item.goods_info.show_this_price}}</p>
          <p class="goods_num">*{{item.num}}</p>
        </li>
        <li class="goods_xioaji">
          <h2>共{{shuli}}件商品  合计：￥{{jiage}}</h2>
        </li>
        <li class="kehufan">
          <label>选填：</label>
          <input type="" name="" placeholder="买家留言（50字以内）">
        </li>
      </ul>
  </div>
    </div>
    <!-- <subtotal :num="goods"></subtotal> -->
    <div class="payment_box">
      <ul class="payment_main">
        <li class="payment_num">需支付：￥{{jiage}}</li>
        <li class="payment_pay" @click="putonggoodsbuy()">立即提货</li>
      </ul>
    </div>
    <confirm v-bind:confirmModalOptions="confirmOptions" ref="myConfirm"></confirm>
  </div>
</template>

<script type="text/javascript">
  import Header from "../header/header.vue";
  import address from "./address.vue";
  import subtotal from "./subtotal.vue";
  import confirm from "../../alert/confirm.vue";
export default {
  name: 'cuxiao',
  data(){
    return{
      header_title:{url:"/",title:"确认订单"},
      confirmOptions:{},
      address:{},
      goods:[],
      numer:1,
      cur_id:"",
      sign:"",
      goodsid:'',
      jiage:'',
      shuli:''
    }
  },
  created:function() {
    let cur_id = sessionStorage.getItem("cur_id"),
    sign = sessionStorage.getItem("sign"),
    routerParams = this.$route.query.id,
    conent = this;
    let _url = "index.php?g=app&m=shopping&a=default_address_and_merge_order_post";
    conent.cur_id = cur_id;
    conent.sign = sign;
    conent.goodsid = routerParams;
    let _addressdata = {
      ids_str:routerParams,
      cur_id:conent.cur_id,
      sign:conent.sign
    }
    conent.$http.post(_url,_addressdata).then(function(data){
        if(data.data.status== "1"){
          conent.goods = data.data.data.want_merge_list;
          conent.address = data.data.data.default_address;
          var shulide = 0,jiagede = 0;
          for (var i = 0; i < data.data.data.want_merge_list.length; i++) {
            shulide += parseInt(data.data.data.want_merge_list[i].num);
          }
          conent.shuli = shulide;
          for (var i = 0; i < data.data.data.want_merge_list.length; i++) {
            jiagede+=data.data.data.want_merge_list[i].num*data.data.data.want_merge_list[i].goods_info.show_this_price;
          }
          conent.jiage = jiagede;
        }else {
          
        }
    },function(response){});
  },
   methods:{
    putonggoodsbuy:function(){
      let _url = '/index.php?g=app&m=shopping&a=merge_order_post',
      conent = this,
      _data={
        cur_id:conent.cur_id,
        sign:conent.sign,
        ids_str:conent.goodsid,
        name:conent.address.name,
        mobile:conent.address.mobile,
        address:conent.address.sheng+conent.address.shi+conent.address.qu+conent.address.address
      }

      conent.$refs.myConfirm.showModel();
      conent.confirmOptions= {
        title: "提货提示",//提示
        title_right: "",//提示
        message: '您确定要提货吗？',
        btnSubmitText: "确定",//确定
        btnCancelText: "取消",//取消
        btnSubmitFunction: function () {
          conent.$http.post(_url,_data).then(function(data){
            if(data.data.status== "1"){
              conent.$toast("提货成功");
              window.setTimeout(function(){
                conent.$router.back();
              },1500)
            }else {
              conent.$toast(data.data.info);
              if(data.data.info =="登录过期，请重新登录"){
                sessionStorage.clear();
                top.location = "index.html";
              }
            }
          },function(response){
              conent.$toast(response);
          })
        },
        btnCancelFunction: function () {
          conet.$toast("已取消");
        }
      }
    }
  },
  components:{
      'Header':Header,
     'Address':address,
     'subtotal':subtotal,
     'confirm':confirm
  }
}
</script>

<style scoped lang="less">
@import '../../../assets/less/index.less';
.goodsdetails{
  width: 100vw;
  .goodsdetails_main{
    border-top: solid 0.5vw @color8;
    text-align: left;
    h2{
      height: 10vw;
      line-height: 10vw;
      font-size: @h1_font_size;
      width: @width;
      margin: 0 auto;
    }
  }
  .payment_box{
    width: 100vw;
    height: 15vw;
    line-height: 15vw;
    font-size: @h2_font_size;
    border-bottom: solid 1px @color8;
    border-top: solid 1px @color8;
    position: fixed;
    bottom: 0;
    left: 0;
    .payment_main{
      width: 100%;
      height: 100%;
      overflow: hidden;
      zoom:1;
      .payment_num{
        float: left;
        width: 66.666%;
      }
      .payment_pay{
        float: right;
        width: 33.333%;
        background-color: @color;
        color: @color1;
      }
    }
  }
  .goodsdetails_box{
    width: 100vw;
    font-size: @h1_font_size;
    .goods_main_box{
      width: 100vw;
      border-top: solid 1px @color3;
      li{
        overflow: hidden;
        zoom:1;
      }
    }
    .goodsname_box{
      width: @width;
      height: 18vw;
      margin: 3vw auto;
      font-size: @h3_font_size; 
      .goods_img,.goodsname_main{
        float: left;
      }
      .goods_img{
        width: 18vw;
        height: 18vw;
      }
      .goodsname_main{
        width:45vw;
        margin-left: 2vw;
      }
      .goods_pirce,.goods_num{
        float: right;
        text-align: right;
        width: 21vw;
      }
      .goods_pirce{
        color: @color;
      }
      .goods_num{
        margin-top: 3vw;
      }
    }
    .goods_xioaji{
      margin: 0 auto;
      width: 100vw;
      font-size: @h1_font_size;
      border-top: solid 1px @color8;
      border-bottom: solid 1px @color8;
      h2{
        width: @width;
        margin: 0 auto;
        height: 10vw;
        line-height: 10vw;
        text-align: right;
      }
    }
    .kehufan{
      width: @width;
      margin: 2vw auto;
      font-size: @h1_font_size;
      label{}
      input{
        width: 60vw;
      }
    }
  }
}
</style>